<template>
  <div id="app">
    <div class="nav-menu">
      <div class="back-page">
        <div class="back-content">
          <div class="back-icon"><i class="el-icon-back"></i></div>
          <span>退出聊天</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="content-card">
        <div class="content-left">
          <div class="content-left-top">
            <img src="../assets/logo.png" alt="" class="chakra-image" />
            <div class="textEllipsis">aa</div>
          </div>
          <div class="content-left-center">
            <el-button round icon="el-icon-chat-dot-round">新对话</el-button>
            <el-button icon="el-icon-delete" circle></el-button>
          </div>
          <div class="content-left-bottom"></div>
        </div>
        <div class="content-right">
          <div class="content-right-top">top</div>
          <div class="content-right-bottom">
            <div class="bottom-content">
              <div class="dialog-box">
                <div class="chat-content" id="scrollRef" ref="scrollRef">
                        <div class="container-xxl">
                          <ul class="list-unstyled py-4" v-for="(item, index) of messageList" :key="index">
                            <!-- Right Message -->
                            <li class="d-flex message right">
                              <div class="message-body">
                                <span class="date-time text-muted"></span>
                                <div class="message-row d-flex align-items-center justify-content-end">
                                  <div class="message-content border p-3">
                                    {{ item.send.messages[0].content }}
                                    <div class="attachment" v-show="item.send.messages[0].fileName" @click="handleBackDoc">
                                      <div class="media mt-2">
                                        <div class="avatar me-2">
                                          <div class="avatar rounded no-image orange">
                                            <i class="zmdi zmdi-collection-pdf"></i>
                                          </div>
                                        </div>
                                        <div class="media-body overflow-hidden">
                                            <h6 class="text-truncate mb-0">{{ item.send.messages[0].fileName }}</h6>
                                            <span class="file-size">{{ item.send.messages[0].fileSize }}</span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </li>
                            <!-- end Right Message -->
                            <!-- Left Message -->
                            <li class="d-flex message" v-if="item.receive">
                              <div class="mr-lg-3 me-2">
                                <img class="avatar sm rounded-circle" src="../assets/chatgpt.jpg" alt="avatar"></div>
                              <div class="message-body">
                                <span class="date-time text-muted">{{ item.receive.model }}</span>
                                <div class="message-row d-flex align-items-center">
                                  <div class="message-content p-3">
                                    <v-md-preview :text="item.receive.choices[0].message?item.receive.choices[0].message.content:item.receive.choices[0].delta.content"></v-md-preview>
                                  </div>
                                </div>
                              </div>
                            </li>
                            <!-- end Left Message -->
                            <!-- Loading Message -->
                            <li class="d-flex message" v-if="item.loading">
                              <div class="mr-lg-3 me-2">
                                <img class="avatar sm rounded-circle" src="../assets/chatgpt.jpg" alt="avatar"></div>
                              <div class="message-body">
                                <div class="message-row d-flex align-items-center">
                                  <div class="message-content p-3">
                                    <div class="wave">
                                      <span class="dot"></span>
                                      <span class="dot"></span>
                                      <span class="dot"></span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </li>
                            <!-- end Loading Message -->
                          </ul>
                        </div>
                      </div>
              </div>
              <div class="input-box">
                <div class="css-1yy90g1">
                  <div class="css-p1nhsf">
                    <div class="css-hg8u7"></div>
                    <div class="css-18cbd93">
                      <textarea
                        v-model="inputText"
                        rows="1"
                        placeholder="输入问题"
                        maxlength="-1"
                        class="chakra-textarea css-1p3qni"
                        style="height: 22px"
                      ></textarea>
                      <div
                        class="css-yymjw2"
                        :class="[
                          {
                            'mouse-over-disabled':
                              mouseOver && inputText.length === 0,
                          },
                          {
                            'text-btn-bgc': inputText.length > 0,
                          },
                        ]"
                        @mouseenter="handleMouseEnter"
                        @mouseleave="handleMouseLeave"
                        @click="handleClick"
                      >
                        <span tabindex="0" class="css-1baulvz">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 16"
                            fill="none"
                            class="chakra-icon css-ee6or9"
                            focusable="false"
                          >
                            <path
                              d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
                              fill="currentColor"
                            ></path>
                          </svg>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: "",
      apiResponse: null,
      loading: false,
      error: null,
      questionInput: "",
      inputText: "",
      mouseOver: false,
    };
  },
  computed: {
    buttonClass() {
      return {
        "css-yymjw2": true,
        enabled: this.inputText.length > 0,
        disabled: this.inputText.length === 0,
      };
    },
  },
  methods: {
    handleMouseEnter() {
      if (this.inputText.length === 0) {
        this.mouseOver = true;
      }
    },
    handleMouseLeave() {
      this.mouseOver = false;
    },
    handleClick() {
      if (this.inputText.length === 0) {
        event.preventDefault();
      } else {
        alert("Button clicked!");
      }
    },
  },
  submitQuery() {
    this.loading = true;
    this.error = null;
    // 假设您有一个名为getGptResponse的函数用于API调用
    // 您需要创建这个函数并在此处调用它
    getGptResponse(this.query)
      .then((response) => {
        this.apiResponse = response;
      })
      .catch((error) => {
        this.error = error.message || "未知错误";
      })
      .finally(() => {
        this.loading = false;
      });
  },
};
</script>

<style scoped>
#app {
  display: flex;
  height: 100vh;
  padding: 0;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  background-color: #f4f4f7;
}

.nav-menu {
  width: 200px;
  background-color: #f4f4f7;
  padding: 20px;
  border-right: 1px solid #dfe2ea;
  list-style-type: none;
}

.main-content {
  flex: 1;
  padding: 20px;
}
.content-card {
  background-color: #fff;
  position: relative;
  flex-direction: row;
  display: flex;
  height: 100%;
  flex: 1 0 0px;
  border-radius: 16px;
  border: 1px solid #dfe2ea;
}
.content-left {
  flex: 0 0 291px;
  padding: 16px;
  border-right: 1px solid #dfe2ea;
}
.content-left-top {
  display: flex;
  width: 100%;
  height: 55px;
  line-height: 34px;
  padding: 10.5px 5.5px 7px;
  cursor: pointer;
}
.text-btn-bgc {
  background-color: #487fff !important;
  cursor: pointer;
}
.mouse-over-disabled {
  cursor: not-allowed;
  background-color: red; /* Optional: add visual feedback */
}
.content-left-center {
  display: flex;
}
.content-left-center button:first-child {
  color: #3370ff;
  flex: 1;
}
.content-left-center button:last-child {
  width: 40px;
}
.content-left-center button:last-child:hover {
  color: #d92d20;
  background: rgba(217, 45, 32, 0.1);
  border-color: #fda29b;
}
.chakra-image {
  object-fit: contain;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  padding: 1px;
  margin-right: 12px;
}
.back-content {
  display: flex;
  width: 182px;
  height: 33px;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
}
.back-content:hover {
  background-color: #e8ebf0;
}

.back-icon {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 9px;
  background-color: #fff;
  text-align: center;
  line-height: 37px;
  margin-right: 12px;
}

.back-icon i {
  font-size: 24px;
  font-weight: 700;
  color: #487fff;
}
.back-icon i:hover {
  color: #5698ff;
}
.back-content span {
  line-height: 30px;
}
.content-right {
  display: flex;
  position: relative;
  flex: 1 0 0px;
  flex-direction: column;
}
.input-box {
  position: absolute;
  bottom: 10px;
  width: 95%;
}
.css-1p3qni {
  width: 100%;
  font-size: 1rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  border-radius: 8px;
  min-width: 0px;
  outline: transparent solid 2px;
  outline-offset: 2px;
  position: relative;
  appearance: none;
  transition-property: background-color, border-color, color, fill, stroke,
    opacity, box-shadow, transform;
  transition-duration: 200ms;
  padding-top: 0px;
  padding-bottom: 0px;
  vertical-align: top;
  --input-font-size: 1rem;
  --input-padding: 1rem;
  --input-border-radius: 8px;
  --input-height: 2, 5rem;
  background: inherit;
  padding-left: 1.2rem;
  padding-right: 48px;
  border: 0;
  resize: none;
  height: 22px;
  line-height: 22px;
  max-height: 50vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: #111824;
  box-shadow: none !important;
}
.content-right-top {
  padding: 0 1.25rem;
  height: 60px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  border-bottom: 1px solid rgb(232, 235, 240);
  color: var(--chakra-colors-myGray-900);
}
.content-right-bottom {
  padding: 0 1.25rem;
}
.css-1yy90g1 {
  margin: 10px auto;
  max-width: min(800px, 100%);
  padding-inline-start: 1.25rem;
  padding-inline-end: 1.25rem;
}
.css-p1nhsf {
  padding-top: 18px;
  padding-bottom: 18px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.css-yymjw2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 1rem;
  bottom: 12px;
  width: 32px;
  background-color: #e5e5e5;
  height: 32px;
  border-radius: 5px;
}
.css-ee6or9 {
  display: inline-block;
  line-height: 1em;
  flex-shrink: 0;
  color: #fff;
  width: 20px;
  height: 20px;
  box-sizing: content-box;
  vertical-align: top;
  fill: currentcolor;
}
</style>
